<template>
  <van-popup
    v-model="open"
    round
    closeable
    :close-on-click-overlay="false"
    position="bottom"
    :style="{ height: '80%' }"
  >
    <div class="title">申请商家入驻</div>
    <van-form @submit="onSubmit" autocomplete="off">
      <van-field
        v-model="formData.name"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        input-align="right"
        maxlength="40"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="formData.mobile"
        name="mobile"
        label="手机"
        type="tel"
        placeholder="请输入手机"
        input-align="right"
        maxlength="40"
        :rules="[{ required: true, validator, message: '请输入手机' }]"
      />
      <van-field
        v-model="formData.typeName"
        is-link
        readonly
        name="mobile"
        @click="goodsOpen = true"
        label="商品分类"
        placeholder="请输选择商品分类"
        input-align="right"
        :rules="[{ required: true, message: '请输选择商品分类' }]"
      />
      <van-popup
        v-model="goodsOpen"
        round
        :close-on-click-overlay="false"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-picker
          title="商品分类"
          show-toolbar
          value-key="typeName"
          :columns="goodsTypeList"
          @confirm="onConfirm"
          @cancel="goodsOpen = false"
        />
      </van-popup>
      <van-button plain>申请</van-button>
    </van-form>
  </van-popup>
</template>
<script>
import { Form, Field, Icon, Popup, Button, Toast, Picker } from "vant";
import { addStoreLevel, getStoreLevel } from "@/api/myMarket";
import { goodsType } from "@/api/market";
import { mobile } from "@/utils/APPempower";
export default {
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
  },
  data() {
    return {
      open: false,
      goodsOpen: false,
      formData: {
        name: "",
        mobile: mobile(),
        goodsType: "",
        typeName: "",
      },
      goodsTypeList: [],
    };
  },
  methods: {
    show() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "加载中...",
      });
      getStoreLevel({}).then((res) => {
        switch (res.data.resultData.storeLevel) {
          case "0":
            this.open = true;
            goodsType({}).then((res) => {
              this.goodsTypeList = res.data.resultData;
            });
            break;
          case "1":
            Toast("你已是商家");
            break;

          case "2":
            Toast("审核中");
            break;

          default:
            Toast("请联系管理员");
            break;
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
    },
    validator(val) {
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val);
    },
    onConfirm(item) {
      this.formData.goodsType = item.goodsTypeId;
      this.formData.typeName = item.typeName;
      this.goodsOpen = false;
    },
    onSubmit() {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "提交中...",
      });
      addStoreLevel(this.formData).then((res) => {
        if (res.data.resultStatus) {
          Toast.success(res.data.errorMessage);
          this.open = false;
          this.$emit("load");
        } else {
          Toast.fail(res.data.errorMessage);
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  padding: 17px 0;
  font-size: 18px;
  text-align: center;
  line-height: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
}
.van-form {
  padding: 0 17px;
  .name {
    padding: 13px 0;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .van-field {
    margin-bottom: 18px;
    padding: 13px 0;
    height: 20px;
    line-height: 20px;
    box-sizing: content-box;
    /deep/ .van-field__error-message {
      display: none;
    }
    /deep/.van-cell__right-icon {
      line-height: 20px;
      height: 20px;
    }
    &:after {
      left: 0;
      right: 0;
    }
  }
  .van-button {
    display: block;
    margin: 90px auto 0 auto;
    width: 125px;
    height: 46px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: #333333;
    border-radius: 23px;
  }
}
</style>